<template>
  <div style="psoition: relative;" class="content_relative">
    <el-tabs v-model="tabsName" type="card">
      <el-tab-pane label="实体类基本信息" name="info">
        <el-card
          shadow="never"
          class="basic-info-body"
          :body-style="{ padding: '10px 10px', height: screenHeight - cardHeight + 'px', 'boeder-top': 'none' }"
        >
          <el-form
            v-if="shiTiLRecord"
            ref="shiTiLRecord"
            v-loading="FromLoading"
            :model="shiTiLRecord"
            label-width="100px"
            class="demo-mecAddData"
          >
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="实体类名称:" size="mini" prop="shiTiLMC">
                  <span>{{ shiTiLRecord.shiTiLMC }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实体类代号:" size="mini">
                  <span>{{ shiTiLRecord.shiTiLDH }}</span>
                </el-form-item>
              </el-col>
              <!--              <el-col :span="12">-->
              <!--                <el-form-item label="应用系统:" size="mini">-->
              <!--                  <span>{{ shiTiLRecord.yingYongXT.buMeng.buMengLB.name ? shiTiLRecord.yingYongXT.buMeng.buMengLB.name :'暂无' }}</span>-->

              <!--                  &lt;!&ndash;                  ${(record.YingYongXT.BuMen.BuMenLB.name)!""}&ndash;&gt;-->

              <!--                </el-form-item>-->
              <!--              </el-col>-->
              <!--              <el-col :span="12">-->
              <!--                <el-form-item label="实体类类别:" size="mini">-->
              <!--                  <span>{{ shiTiLRecord.shitiLLB.name }}</span>-->
              <!--                </el-form-item>-->
              <!--              </el-col>-->
              <!--              <el-col :span="12">-->
              <!--                <el-form-item label="状态:" size="mini">-->
              <!--                  <span>{{ shiTiLRecord.__stat }}</span>-->
              <!--                </el-form-item>-->
              <!--              </el-col>-->

              <!-- <el-col :span="12">
                <el-form-item label="表名:" size="mini">
                  <span>{{ shiTiLInfo.biaoMing }}</span>
                </el-form-item>
              </el-col>-->
              <el-col :span="24">
                <el-form-item label="备注:" size="mini">
                  <span v-text="shiTiLRecord.beiZhu" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="字段" style="margin-bottom:0px">
              <template>
                <el-table
                  v-if="shiTiLRecord.zds"
                  border
                  :data="shiTiLRecord.zds"
                  :stripe="true"
                  style="width: 100%"
                  :height="screenHeight - 400"
                  size="small"
                  class="dept-content"
                >
                  <el-table-column type="index" label="序号" fixed />
                  <el-table-column prop="mingCheng" label="名称" fixed>
                    <template slot-scope="scope">
                      <span>{{ scope.row.ziDuanMC }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="daiHao" label="代号">
                    <template slot-scope="scope">
                      <span>{{ scope.row.ziDuanDH }}</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column prop="lieMing" label="列名"></el-table-column>
                              <el-table-column prop="kuanDu"  label="宽度"></el-table-column>
                              <el-table-column prop="jingDu"  label="精度"></el-table-column>
                              <el-table-column prop="shiTiL"  label="实体类" width="100px">
                                <template slot-scope="scope">
                                  <span>{{scope.row.shiTiL.name}}</span>
                                </template>
                  </el-table-column>-->
                  <!--                  <el-table-column prop="ziDuanLX" label="字段类型" width="150px">-->
                  <!--                    <template slot-scope="scope">-->
                  <!--                      <span>{{ scope.row.ziDuanLX.name }}</span>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <!--                  <el-table-column prop="guanLianSTL" label="关联实体类" width="160px">-->
                  <!--                    <template slot-scope="scope">-->
                  <!--                      <span>{{ scope.row.guanLianSTL.name }}</span>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <!-- <el-table-column prop="jiLianFS" label="级联方式" width="140px">
                                    <template slot-scope="scope">
                                      <span>{{scope.row.jiLianFS.name}}</span>
                                    </template>
                                  </el-table-column>
                                  <el-table-column prop="guanLianFLZD" label="关联父类字段" width="200px">
                                    <template slot-scope="scope">
                                      <span>{{scope.row.guanLianFLZD.name}}</span>
                                    </template>
                                  </el-table-column>
                                  <el-table-column prop="huanCunDX" label="缓存对象值" width="200px">
                                    <template slot-scope="scope">
                                      <span>{{scope.row.huanCunDX.name}}</span>
                                    </template>
                  </el-table-column>-->
                </el-table>
              </template>
            </el-form-item>
          </el-form>
          <br>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-button-group class="BtnAll">
      <el-button size="small" type="primary" @click="openEditShiTilei">编辑实体类</el-button>
    </el-button-group>
    <!-- <V-shitiledit ref="shitiledit" @getList="getListActive" :shiTiLInfo="shiTiLInfo"></V-shitiledit> -->
    <div :is="openType" :visible.sync="isShowModel">
      <component :is="pageName" :record-id="recordId" />
    </div>
  </div>
</template>

<script>
import VShitiledit from '@/views/app-dev/shiTiLei/edit/shiTiLeiEdit/index.vue'
import Axios from 'axios'
import Vue from 'vue'
import { LiYuDataSource } from 'liyu-ui'

export default {
  components: { VShitiledit },
  props: {
    // id: {
    //   type: Number,
    //   required: true,
    // }
  },
  data() {
    return {
      tabsName: 'info',
      FromLoading: false,
      screenHeight: document.body.clientHeight,
      cardHeight: 264,
      shiTiLRecord: {
        id: '',
        shiTiLDH: '',
        shiTiLMC: '',
        biaoMing: '',
        shitiLLB: { name: '', id: '' },
        yingYongXT: { name: '', id: '' },
        beiZhu: '',
        zds: []
      },
      shiTiLInfo2: {},
      tableData: [],
      isShowModel: false,
      openType: '',
      pageName: '',
      recordId: ''
    }
  },
  watch: {
    screenHeight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val
        this.timer = true
        const that = this
        setTimeout(function() {
          // 打印screenWidth变化的值
          that.timer = false
        }, 400)
      }
    },
    // id: function(newVla, oldVal) {
    //   console.log(newVla)
    //   if (newVla !== -1) {
    //     Axios.get('/api/getShiTiLeiInfo', { data: { id: newVla }}).then(res => {
    //       console.log(res.data)
    //       this.shiTiLInfo = res.data
    //       this.$emit('shiTiLInfo', this.shiTiLInfo)
    //       this.FromLoading = false
    //     })
    //   }
    // },
    $route(to, from) {
      const id = to.query._id
      this.handleInitRecord(id)
    }
  },
  created() {
    this.ifTagsView(this.$store.state.settings.tagsView)
  },
  mounted() {
    const id = this.$route.query._id
    this.handleInitRecord(id)
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenHeight = document.body.clientHeight
        that.screenHeight = window.screenHeight
      })()
    }
  },

  methods: {
    ifTagsView(data) {
      if (data) {
        this.cardHeight = 264
      } else {
        this.cardHeight = 230
      }
    },
    handleInitRecord(_id) {
      const that = this
      new LiYuDataSource({
        shiTiLeiDH: 'DEV_ShiTiLei'
      }).obtain(
        {
          id: _id
        },
        recordSet => {
          that.shiTiLRecord = recordSet.getRecordByIndex(0)
        }
      )
    },
    getListActive() {
      this.$emit('getShiTiLei')
    },
    openEditShiTilei() {
      const options = {
        openType: 'el-dialog', // el-drawer || el-dialog
        filePath: 'shiTiLei/edit/shiTiLeiEdit/index.vue',
        fileName: 'editRecord'
      }
      this.isShowModel = true
      this.openType = options.openType
      this.pageName = options.fileName
      Vue.component(options.fileName, resolve => {
        require([`@/views/app-dev/${options.filePath}`], resolve)
      })
      this.recordId = this.shiTiLRecord._id
    },
    getTableData() {
      Axios.get('/api/EidtableData').then(res => {
        this.tableData = res.data
        // console.log(res)
      })
    }
  }
}
</script>

<style scoped>
.el-card {
  border-top: none !important;
}
/*修改滚动条样式*/
div::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  /**/
}
div::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
}
div::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
/*修改滚动条样式*/
.dept-content >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  /**/
}
.dept-content >>> .el-table__body-wrapper::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
}
.dept-content >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
.basic-info-body {
  /* height: 600px; */
  overflow-y: scroll;
}
.content_relative {
  position: relative;
}
.BtnAll {
  position: absolute;
  right: 20px;
  /* z-index:; */
  top: 0px;
}
</style>

